<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

<div type="hidden" id="message"></div>
<div class="content">
    <h1>Late Days Allowed</h1>
    <form id="late-day-form" class="exception-form" method="post" enctype="multipart/form-data" onsubmit="return updateLateDays($(this));">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
        <p>
            Use this form to grant students additional late days (beyond the initial number specified in the course configuration).<br>
            Students may use these additional late days for any future homeworks (after the specificed date).
        </p>
        <fieldset class="single-student">
            <legend class="option-title">Single Student Entry</legend>
            <label for="user_id">
                Student ID:
                <input class="option-input" type="text" name="user_id" id="user_id">
            </label>
            <label for="datestamp">
                Datestamp (YYYY-MM-DD):
                <input class="option-input" type="text" name="datestamp" id="datestamp">
            </label>
            <label for="late_days">
                Late Days:
                <input class="option-input" type="text" name="late_days" id="late_days">
            </label>
            <div>
                <input class="btn btn-primary" type="submit" value="Submit">
            </div>
        </fieldset>
        <fieldset>
            <legend>
                <span class="option-title" id="csv_upload_title">Multiple Student Entry Via CSV Upload</span>
                <div id="csv_upload_format">Do not use column headers. CSV must be of the following form: student_id, MM-DD-YYYY, late_days</div>
            </legend>
            <label for="csv_option_overwrite_all">
                <input type="radio" name="csv_option" id="csv_option_overwrite_all" value="csv_option_overwrite_all" checked>
                Upload overwrites&nbsp;<em>all</em>&nbsp;values
            </label>
            <label for="csv_option_preserve_higher">
                <input type="radio" name="csv_option" id="csv_option_preserve_higher" value="csv_option_preserve_higher">
                Do not overwrite higher values
            </label>
            <input type="file" name="csv_upload" id="csv_upload" aria-labelledby="csv_upload_title csv_upload_format" onchange="return updateLateDays($(this));">
        </fieldset>
    </form>
    {# This is a data table #}
    {% if not users or (users|length < 1) %}
        <p id="empty-table" class="warning">No late days are currently entered</p>
    {% else %}
        <table id="late-day-table" class="table table-striped mobile-table">
            <caption>Late Days Allowed</caption>
            <thead>
                <tr>
                    <th>Student ID</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Total Allowed Late Days</th>
                    <th>Effective Date</th>
                    <th>Delete</th>
                </tr>
            </thead>
            <tbody>
                {% for user in users %}
                    <tr>
                        <td class="align-left">{{ user.getId() }}</td>
                        <td class="align-left">{{ user.getDisplayedFirstName() }}</td>
                        <td class="align-left">{{ user.getDisplayedLastName() }}</td>
                        <td>{{ user.getAllowedLateDays() }}</td>
                        <td>{{ user.getSinceTimestamp() }}</td>
                        <td>
                            <a 
                                aria-label='Delete latedays for {{ user.getId() }} on {{ user.getSinceTimestamp() }}' 
                                href="javascript:deleteLateDays('{{ user.getId() }}', '{{ user.getSinceTimestamp() }}');"
                            >
                                <i class="fas fa-trash"></i>
                            </a>
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    {% endif %}
</div>
<script>
    $("#user_id").autocomplete({
        source: {{ student_full|raw }}
    });
    flatpickr("#datestamp", {
            plugins: [ShortcutButtonsPlugin(
                    {
                        button: [
                            {
                                label: "Now"
                            }, 
                            {
                                label: "End of time"
                            }
                        ],
                        label: "or",
                        onClick: (index, fp) => {
                            let date;
                            switch (index) {
                                case 0: 
                                    date = new Date();
                                    break;
                                case 1: 
                                    date = new Date("01/01/9998");
                                    break;
                            }
                            fp.setDate(date, true);
                        }
                    }
                )],
            allowInput: true,
            dateFormat: "Y-m-d"
        });

</script>
